<template>
  <div class="bg-[#f7fafb]" id="div-1">
    <div class="w-8/12 mx-auto py-[30px]" id="div-2">
      <a-flex align="center" justify="space-between" gap="20" class="my-[17px]" id="a-flex-53">
        <a-typography-link href="#" v-for="(item, index) of mainListData4" :key="index" class="inline-block w-1/3 text-[22px] font-bold text-center leading-[77px]" :class="item.style" :id="`a-typography-link-54-${index}`">{{item.content}}</a-typography-link>
      </a-flex>
      <a-row :gutter="20" id="a-row-55">
        <a-col :span="16" id="a-col-56">
          <a-card :bordered="false" class="p-5 !shadow-none rounded-none" id="a-card-57">
            <a-flex align="center" justify="space-between" id="a-flex-58">
              <a-typography-paragraph class="!mb-0 py-5 text-[#333] text-[22px]" id="a-typography-paragraph-59">
                民意征集
                <a-typography-text class="block w-1/2" id="a-typography-text-60">
                  <a-divider class="!my-0 border-[#333]" id="a-divider-61"></a-divider>
                </a-typography-text>
              </a-typography-paragraph>
              <a-typography-link href="#" class="!text-[#055fb2] text-base" id="a-typography-link-62">
                更多
                <MinusOutlined id="minusoutlined-63"></MinusOutlined>
              </a-typography-link>
            </a-flex>
            <a-list :data-source="mainListData5" id="a-list-64">
              <template #renderItem="{item, index}">
                <a-list-item class="!p-0 !border-0" :id="`a-list-item-65-${index}`">
                  <a-row class="w-full" :id="`a-row-66-${index}`">
                    <a-col :span="1" class="flex items-center justify-center" :id="`a-col-67-${index}`">
                      <a-badge color="#c9c9c9" :id="`a-badge-68-${index}`"></a-badge>
                    </a-col>
                    <a-col :span="16" :id="`a-col-69-${index}`">
                      <a-typography-link href="#" ellipsis :content="item.title" class="!text-[#282828] text-lg leading-[42px]" :id="`a-typography-link-70-${index}`"></a-typography-link>
                    </a-col>
                    <a-col :span="4" class="flex items-center justify-center" :id="`a-col-71-${index}`">
                      <a-typography-text class="text-[#9a9a9a] text-lg" :id="`a-typography-text-72-${index}`">{{item.date}}</a-typography-text>
                    </a-col>
                    <a-col :span="3" class="flex items-center justify-center" :id="`a-col-73-${index}`">
                      <a-typography-text :class="item.style" class="px-2 text-[#fff] text-sm leading-[22px]" :id="`a-typography-text-74-${index}`">{{item.status}}</a-typography-text>
                    </a-col>
                  </a-row>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
        <a-col :span="8" id="a-col-75">
          <a-card :bordered="false" class="p-5 !shadow-none rounded-none" id="a-card-76">
            <a-flex align="center" justify="space-between" id="a-flex-77">
              <a-typography-paragraph class="!mb-0 py-5 text-[#333] text-[22px]" id="a-typography-paragraph-78">
                网上调查
                <a-typography-text class="block w-1/2" id="a-typography-text-79">
                  <a-divider class="!my-0 border-[#333]" id="a-divider-80"></a-divider>
                </a-typography-text>
              </a-typography-paragraph>
              <a-typography-link href="#" class="!text-[#055fb2] text-base" id="a-typography-link-81">
                更多
                <MinusOutlined id="minusoutlined-82"></MinusOutlined>
              </a-typography-link>
            </a-flex>
            <a-list :data-source="mainListData6" id="a-list-83">
              <template #renderItem="{item, index}">
                <a-list-item class="!p-0 !border-0 !mt-[17px]" :id="`a-list-item-84-${index}`">
                  <a-row class="w-full" :id="`a-row-85-${index}`">
                    <a-col :span="19" :id="`a-col-86-${index}`">
                      <a-typography-link href="#" ellipsis :content="item.title" class="block !text-[#282828] text-lg" :id="`a-typography-link-87-${index}`"></a-typography-link>
                      <a-typography-text class="block text-[#9a9a9a] text-lg" :id="`a-typography-text-88-${index}`">{{item.date}}</a-typography-text>
                    </a-col>
                    <a-col :span="5" class="flex items-start justify-center" :id="`a-col-89-${index}`">
                      <a-typography-text :class="item.style" class="px-2 text-[#fff] text-sm leading-[22px]" :id="`a-typography-text-90-${index}`">{{item.status}}</a-typography-text>
                    </a-col>
                  </a-row>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
      <a-card :bordered="false" class="my-5 pt-[76px] px-5 pb-5 relative" id="a-card-91">
        <a-typography-link href="#" class="inline-flex w-3/12 items-center justify-evenly !text-[#fff] text-[22px] font-bold bg-[#055fb2] leading-[50px] absolute top-0 left-0" id="a-typography-link-92">
          在线访谈
          <ArrowRightOutlined id="arrowrightoutlined-93"></ArrowRightOutlined>
        </a-typography-link>
        <a-row :gutter="20" id="a-row-94">
          <a-col :span="12" v-for="(item, index) of mainListData7" :key="index" :id="`a-col-95-${index}`">
            <div class="h-full bg-[#f5f8f9]" :id="`div-96-${index}`">
              <a-typography-link href="#" :id="`a-typography-link-97-${index}`">
                <a-image :src="item.img" :preview="false" width="100%" :id="`a-image-98-${index}`"></a-image>
              </a-typography-link>
              <div class="py-[15px] px-10 bg-[#f5f8f9]" :id="`div-99-${index}`">
                <a-typography-paragraph v-for="(item1, index1) of item.listData" :key="index1" class="!mb-0 text-[#333] text-base leading-[34px]" :id="`a-typography-paragraph-100-${index}-${index1}`">
                  <a-typography-text class="text-[#333] text-lg font-bold" :id="`a-typography-text-101-${index}-${index1}`">{{item1.title}}</a-typography-text>
                  {{item1.content}}
                </a-typography-paragraph>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>


<script setup>
const mainListData4 = [
  { content: "网上投诉平台", style: "!text-[#055fb2] bg-gradient-to-b from-[#fcfdff] to-[#bdddfa]" },
  { content: "网络问政", style: "!text-[#ac5b0d] bg-gradient-to-b from-[#fcfdff] to-[#fbdec4]" },
  { content: "建言征集平台", style: "!text-[#3e55b5] bg-gradient-to-b from-[#fcfdff] to-[#c5cffa]" },
];
const mainListData5 = [
  { title: "关于公开征求《贵阳贵安服务民营企业“五帮”专项行动工作方案(征求", date: "2025.03.03", status: "进行中", style: "bg-[#309f58]" },
  { title: "关于公开征求《贵阳市刚性支出困难家庭认定实施细则(征求意见稿)", date: "2025.02.13", status: "已结束", style: "bg-[#a8a8a8]" },
  { title: "贵阳市商务局关于公开征求《2025-2026年贵阳贵安加油站建设实施方", date: "2025.01.22", status: "已结束", style: "bg-[#a8a8a8]" },
  { title: "关于公开征求《贵阳市医疗机构医用耗材结余管理暂行办法(征求意见", date: "2025.01.21", status: "已结束", style: "bg-[#a8a8a8]" },
  { title: "关于公开征求《贵阳市高标准农田建设补助资金管理办法(征求意见稿", date: "2025.01.17", status: "已结束", style: "bg-[#a8a8a8]" },
  { title: "关于公开征求《关于落实残疾人就医相关优惠政策措施的通知(征求意", date: "2025.01.13", status: "已结束", style: "bg-[#a8a8a8]" },
  { title: "关于《贵阳市农村公路养护管理办法(修订草案征求意见稿)》公开征", date: "2025.01.10", status: "已结束", style: "bg-[#a8a8a8]" },
  { title: "贵阳市文化和旅游局关于《贵阳贵安避暑旅居产业高质量发展指导意见", date: "2025.01.09", status: "已结束", style: "bg-[#a8a8a8]" },
]
const mainListData6 = [
  { title: "贵阳贵安退役军人拖拉机和联合收割机驾", date: "2025-02-10", status: "进行中", style: "bg-[#309f58]" },
  { title: "贵阳绿色出行水平调查", date: "2024-05-21", status: "已结束", style: "bg-[#a8a8a8]" },
  { title: "其他市州在贵阳市务工人员调查问卷", date: "2024-03-19", status: "已结束", style: "bg-[#a8a8a8]" },
  { title: "关于2024年贵阳市房地产市场问卷调研表", date: "2024-03-18", status: "已结束", style: "bg-[#a8a8a8]" },
  { title: "退役军人、随军家属就业意向调查问卷", date: "2024-03-08", status: "已结束", style: "bg-[#a8a8a8]" },
]
const mainListData7 = [
  {
    img: "https://picsum.photos/id/10/600/338",
    listData: [
      { title: "主题：", content: "创建全民运动健身模范市 引领健康生活新风尚" },
      { title: "活动时间：", content: "2025-02-18" },
      { title: "活动嘉宾：", content: "余瑛(贵阳市体育局群众体育处副处长)" },
      { title: "简介：", content: "在快节奏的现代生活中，健康已成为我们最宝贵的财富。近年来，贵阳市在推动全民健身、提升市民健康水平方面做出了不懈努力。特别..." },
    ]
  },
  {
    img: "https://picsum.photos/id/11/600/338",
    listData: [
      { title: "主题：", content: "扩大海外朋友圈  提升国际影响力" },
      { title: "活动时间：", content: "2025-01-13" },
      { title: "活动嘉宾：", content: "杨柳（贵阳市外事办公室党组成员、副主任）,方俊（贵阳市人民对外友好协会副处长）" },
      { title: "简介：", content: "国际友城工作是国家总体外交的重要组成部分，在增进中外人民相互理解和友谊、推动中外地方交流与合作、服务国家发展大局和总体外..." },
    ]
  },
]
</script>
<style scoped></style>